<template>
  <demoBlock title="自定义字段名" padding>
    <vcu-input v-model="inputValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
    <vcu-popup v-model:show="show" round position="bottom">
      <vcu-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" :field-names="FieldNames" @close="show = false" @finish="onFinish" />
    </vcu-popup>
  </demoBlock>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const show = ref(false);
    const inputValue = ref("");
    const cascaderValue = ref("");
    const FieldNames = {
      text: "name",
      value: "code",
      children: "items",
    };
    const options = [
      {
        name: "浙江省",
        code: "330000",
        items: [{ name: "杭州市", code: "330100" }],
      },
      {
        name: "江苏省",
        code: "320000",
        items: [{ name: "南京市", code: "320100" }],
      },
    ];
    // 全部选项选择完毕后，会触发 finish 事件
    const onFinish = ({ selectedOptions }) => {
      show.value = false;
      inputValue.value = selectedOptions.map((option) => option.name).join("/");
    };

    return {
      show,
      options,
      onFinish,
      inputValue,
      cascaderValue,
      FieldNames,
    };
  },
});
</script>
